<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订场订单</el-breadcrumb-item>
    </el-breadcrumb>
        <el-card>
            <el-table
                :data="productList"
                stripe
                border
                style="width: 100%">
                <el-table-column
                    prop="yard.yard.name"
                    label="场地名称">
                    <!-- <template slot-scope="scope">
                        <div>
                            {{scope.row.yard.yard.name}}
                        </div>
                    </template> -->
                </el-table-column>
                <el-table-column
                    prop="yard.price"
                    label="商品价格（元）">
                </el-table-column>
                <el-table-column
                    prop="yard.number"
                    label="购买数量">
                </el-table-column>
                <el-table-column
                    prop="yard.state"
                    label="状态">
                    <template slot-scope="scope">
                      <div v-if="scope.row.yard.state==1">待支付</div>
                      <div v-else-if="scope.row.yard.state==2">未支付-交易关闭</div>
                      <div v-else-if="scope.row.yard.state==3">支付成功-未核验</div>
                      <div v-else-if="scope.row.yard.state==4">订单完成-已核验</div>
                      <div v-else-if="scope.row.yard.state==5">退款</div>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    prop="yard.message"
                    label="留言">
                </el-table-column> -->
                <el-table-column
                    prop="createTime"
                    label="下单时间">
                    <template slot-scope="scope">
                        <div>{{setDate(scope.row.createTime)}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="yard.verify"
                    label="校验码">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <div>
                           <!-- <el-button type="primary" @click="changeCommodity(scope.row)">修改</el-button>
                            <el-button type="danger" @click="delCommodity(scope.row)">删除</el-button> -->
                            <el-button v-if="scope.row.yard.state==3" type="primary" @click="checkCommodity(scope.row)">校验</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="show" @close="()=>{resetForm('productForm')}">
            <el-form :model="productForm" :rules="productFormRules" ref="productForm">
                <el-form-item label="商品名" prop="name">
                    <el-input v-model="productForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品类型" prop="typeId">
                    <el-select v-model="productForm.typeId" placeholder="请选择">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="item.desc"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                    <el-input type="number" el-input v-model="productForm.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="detail">
                    <el-input el-input v-model="productForm.detail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="()=>{resetForm('productForm');show = false;}">取 消</el-button>
                <el-button type="primary" @click="addCommodity" :loading='loading'>确 定</el-button>

            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            typeList:[],
            loading:false,
            dialogTitle:'',
            show:false,
            productList:[],
            productForm: {
                name: "",
                typeId: "",
                price: "",
                detail: ""
            },
            productFormRules: {
                name:[ { required: true, message: '请输入商品名', trigger: 'blur' } ],
                typeId:[ { required: true, message: '请输入商品类型', trigger: 'blur' } ],
                detail:[ { required: true, message: '请输入商品描述', trigger: 'blur' } ],
                price:[ { required: true, message: '请输入商品价格', trigger: 'blur' } ],
            },
        }
    },
    async created(){
        this.getComputed()
    },
    methods:{
        async getComputed(){
            const { data } = await this.$http.get('venue/order?type=1')
            console.log(data)
            if (data.state !== 0) {
            return this.$message.error(data.msg)
            }
            this.productList = data.result
        },
        addCommodity(){
            this.$refs['productForm'].validate(async (valid) => {
                if(!valid) return
                let model = this.dialogTitle == '添加商品' ? "post" : "put"
                this.loading = true
                const { data } = await this.$http[model]('venue/goods',this.productForm)
                this.loading = false
                this.show = false
                this.resetForm('productForm')
                this.getComputed()
                if (data.state !== 0) return this.$message.error(data.msg)
                return this.$message.success(this.dialogTitle == '添加商品' ? "添加成功" : "修改成功")
            })
        },
        async checkCommodity(item){
          const {data} = await this.$http.post('venue/verify/yard',{
            orderId: item.oid,
            verify: item.yard.verify
          })
          if (data.state !== 0) return this.$message.error(data.msg)
          item.yard.state = 4
          return this.$message.success(data.msg)
        },
        setDate(originValue) {
              const dt = new Date(originValue)
              const y = dt.getFullYear()
              // 月份，字符串不足两位以0填充
              const m = (dt.getMonth() + 1 + '').padStart(2, '0')
              const d = (dt.getDate() + '').padStart(2, '0')
              const hh = (dt.getHours() + '').padStart(2, '0')
              const mm = (dt.getMinutes() + '').padStart(2, '0')
              const ss = (dt.getSeconds() + '').padStart(2, '0')

              return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
          },
        // changeCommodity(item){
        //     this.dialogTitle = "修改商品"
        //     this.show =true
        //     let obj = JSON.stringify(item)
        //     let itemInfo = JSON.parse(obj)
        //     itemInfo.typeId = item.type.id
        //     this.productForm = itemInfo
        // },
        // delCommodity(item){
        //     this.$confirm('是否删除该商品', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(async () => {
        //         console.log(item)
        //         const { data } = await this.$http.delete('venue/goods',{data:{id:item.id}})
        //         this.getComputed()
        //         if (data.state !== 0) return this.$message.error(data.msg)
        //         return this.$message.success("删除成功")
        //     })
        // },
        resetForm(formName) {
            this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>
    .add{
        display: flex;
        justify-content: flex-end;
    }
    .add .el-button{
        margin-bottom: 10px;
    }
</style>
